<template>
  <div>
    <el-form
      ref="addForm"
      :rules="addFormRules"
      :model="addForm"
      label-width="80px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="addForm.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="addForm.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio v-model="addForm.sex" :label="1">男</el-radio>
        <el-radio v-model="addForm.sex" :label="2">女</el-radio>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="addForm.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addForm.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="confirmAdd">确认</el-button>
        <el-button @click="reset('addForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "addUser",
  data() {
    // 自定义校验规则
    let vPhone = (rule, value, callback) => {
        if(!value) callback()
      let reg = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("手机号码格式不正确"));
      }
    };
    return {
      addForm: {
        username: "",
        password: "",
        sex: 1,
        phone: "",
        email: "",
      },
      addFormRules: {
        username: [
          {
            type: "string",
            required: true,
            message: "用户名不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            type: "string",
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
        ],
        phone: [
          { validator: vPhone, message: "手机号码格式不正确", trigger: "blur" },
        ],
        email: [{ type: "email", message: "邮箱格式不正确", trigger: "blur" }],
      },
    };
  },
  methods: {
    confirmAdd() {
      this.$refs["addForm"].validate(async (valid) => {
        if (valid) {
          const { data } = await this.http({
            method: "post",
            url: "/api/register",
            data: this.addForm,
          });
          if(data.errno !== 0){
              return this.msg({
                  type: 'error',
                  message: '新增用户失败'
              })
          }
          this.msg({
              type: 'success',
              message: '新增用户成功',
              onClose: () => {
                  this.$refs["addForm"].resetFields()
              }
          })
        } else {
          this.msg({
            type: "error",
            message: "表单信息校验未通过",
          });
        }
      });
    },
    reset(form) {
      // this.addForm = { ...defaultAddForm }
      this.$refs[form].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  width: 400px;
}
</style>
